<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第一节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;

			}
		</style>
	</head>
	<body>
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>

	<script>
		window.onload = function() {
				let yCanvas = document.getElementById('canvas');

				console.dir(yCanvas);

				let yPen = yCanvas.getContext("2d");


				yPen.moveTo(100, 0); //moveTO
				yPen.lineTo(0, 100); //lineTo

				yPen.moveTo(0, 100);
				yPen.lineTo(100, 100); //线条二

				yPen.moveTo(100, 100);
				yPen.lineTo(100, 0); //线条三

				yPen.moveTo(250, 0);
				yPen.lineTo(250, 500); //线条三

				yPen.moveTo(0, 250);
				yPen.lineTo(500, 250); //线条三
				
				yPen.moveTo(0, 125);
				yPen.lineTo(500, 125); 
				
				yPen.moveTo(0, 375);
				yPen.lineTo(500, 375); 
				
				yPen.moveTo(125, 0);
				yPen.lineTo(125, 500); 
				
				yPen.moveTo(375, 0);
				yPen.lineTo(375, 500); 
				
				yPen.moveTo(0, 0);
				yPen.lineTo(500, 500); 
				
				yPen.moveTo(500, 0);
				yPen.lineTo(0, 500); 
				
				yPen.moveTo(400, 400);
				yPen.lineTo(500, 400); 
				
				yPen.moveTo(500, 400);
				yPen.lineTo(400, 500); 
				
				yPen.moveTo(400, 400);
				yPen.lineTo(400, 500); 
				
				
				yPen.moveTo(0, 400);
				yPen.lineTo(100, 400); 
				
				yPen.moveTo(100, 400);
				yPen.lineTo(100, 500); 
				
				yPen.moveTo(0, 400);
				yPen.lineTo(100, 500); 
				
				yPen.moveTo(400, 0);
				yPen.lineTo(400, 100); 
				
				yPen.moveTo(400, 100);
				yPen.lineTo(500, 100); 
				
				yPen.moveTo(500, 100);
				yPen.lineTo(400, 0);
				
				yPen.stroke(); //渲染(一次即可)
				
				yPen.strokeStyle= "sandybrown";
				yPen.fillstyle= "yellow";//内部填充
				
				yPen.strokeRect(150,150,200,200);//括号内部的数值分别是距离左边距离，距离右边距离，长度，宽度(可以更加方便画矩形)
				
				console.dir(yPen);//打印
				yPen.clearRect(150, 150,80,80);//橡皮擦
				}
	</script>
</html>
